<template>
    <view class="notice-com" @click="$go(url)">
        <text class="cuIcon cuIcon-notice"></text>
        <view class="nc">
            <view class="txt">
                {{ txt }}
            </view>
        </view>
        <text class="cuIcon cuIcon-right"></text>
    </view>
</template>

<script setup>
const props = defineProps({
    txt: {
        type: String,
        default: ''
    },
    url: {
        type: String,
         default: ''
    }
})

</script>

<style lang="scss" scoped>
.notice-com {
    width: 100%;
    padding: 20rpx;
    display: flex;
    align-items: center;
    color: #f00;

    .cuIcon-notice {
        padding-right: 10rpx;
    }

    .nc {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;

        .txt {
            display: inline-block;
            padding-left: 100%;
            animation: nc 10s linear infinite;
            font-size: 24rpx;
        }
    }

    .cuIcon-right {
        padding-left: 10rpx;
    }
}

@keyframes nc {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
</style>